<template>
    <div class="AdminHome">
     <header>
         <div class="module">
             <div class="module_icon">
                 <img src="@/assets/images/deviceNum.png" />
             </div>
             <div class="module_text">
                 <el-text type="info">{{ $t("message.access_device") }}</el-text>
                 <span>{{ module_num }}</span>
             </div>
         </div>
         <div class="module">
             <div class="module_icon">
                 <img src="@/assets/images/error.png" />
             </div>
             <div class="module_text">
              <el-text type="info">{{ $t("message.error_device") }}</el-text>
              <span>0</span>
             </div>
         </div>
         <div class="module">
             <div class="module_icon">
                 <img src="@/assets/images/user.png" />
             </div>
             <div class="module_text">
              <el-text type="info">{{ $t("message.openSms") }}</el-text>
              <span>{{ store.AableSendMsgNum }}</span>
             </div>
         </div>
         <div class="module">
             <div class="module_icon">
                 <img src="@/assets/images/errorNum.png"/>
             </div>
             <div class="module_text">
              <el-text type="info">{{ $t("message.monitoring") }} </el-text>
             <span>{{  user_store.deviceList.length }}</span>
             </div>
         </div>
     </header>
     <!-- 主体部分 -->
      <el-container>
         <el-row :gutter="10">
             <el-col :span="9">
                 <el-card>
                 <template #header>
                 <div class="card-header">
                     <span>{{ $t("home.realError") }}</span>
                 </div>
                 <!-- 实时报警提醒 -->
                 </template>
                 <scrollTable></scrollTable>
             </el-card>
             </el-col>
             <el-col :span="15">
             <el-card>
                 <template #header>
                 <div class="card-header">
                     <span>{{$t("home.alarm_record")}}</span>
                 </div>
                 </template>
                 <div class="Alarm_statistics">
                     <main class="echart_statistic">
                         <!-- 饼图 -->
                         <section class="echart_pie" ref="pieRef" id="pieRef"></section>
                         <!-- 柱状图 -->
                         <section class="echart_col" ref="colRef"></section>
                     </main>
                     <div class="side_border"></div>
                 </div>
             </el-card>
             </el-col>
         </el-row>
         <el-row :gutter="10" style="margin-top: 10px;">
            <!-- 主机报警统计 -->
            <el-col :span="9">
             <el-card>
                 <template #header>
                 <div class="card-header">
                     <span>{{ $t("home.alarm_sort") }}</span>
                 </div>
                 </template>

                 <sort/>
             </el-card>
            </el-col>
            <el-col :span="8">
                 <el-card>
                     <template #header>
                         <div class="card-header">
                              <span>{{ $t("home.function") }}</span>
                         </div>
                     </template>
                     <div class="chart-grid myself-chart">
               <div class="host-item" v-for="i in tourList" :key="i.id" @click="checkTarget(i)">
                 <div class="img-icon">
                    <el-icon color="#fff" size="30px"><Promotion /></el-icon>
                 </div>
                 <!-- 主机的名称 -->
                 <p class="host_name">{{ $t(i.name) }}</p>
                 <!-- 主机包容了几个监测点 -->
                 <p class="host_num">
                    {{ $t('home.click') }}
                 </p>
                 </div>
             </div>
         </el-card>
            </el-col>
            <el-col :span="7">
                 <el-card class="todo">
                     <template #header>
                         <div class="card-header">
                            <el-input id="el_input" style="height: 100%;" v-model="todoKeyword" :placeholder="$t('home.taskList')" @keyup.enter="addTodo"></el-input>
                         </div>
                     </template>
                     <main class="todoList">
                         <el-empty description="暂无代办" v-if="todoList.length === 0"/>
                         <ul class="todo" v-else>
                            <el-scrollbar>
                            <el-table v-if="todoType === 'home.all'" :data="getAllTodoList" :show-header="false">
                                <el-table-column type="done" width="30">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.done" @change="changeCheck(scope.row.id,scope.row.done)"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="title"></el-table-column>
                                <el-table-column width="60">
                                    <template #default="scope">
                                        <el-button type="text" @click="removeTodo(scope.row.id)">{{$t("home.del")}}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-table v-else-if="todoType === 'home.uncompleted'" :data="getUnDoneTodoList" :show-header="false">
                                <el-table-column type="done" width="30">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.done" @change="changeCheck(scope.row.id,scope.row.done)"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="title"></el-table-column>
                                <el-table-column width="60">
                                    <template #default="scope">
                                        <el-button type="text" @click="removeTodo(scope.row.id)">{{$t("home.del")}}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-table v-else :data="getDoneTodoList" :show-header="false">
                                <el-table-column type="done" width="30">
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.done" @change="changeCheck(scope.row.id,scope.row.done)"></el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="title"></el-table-column>
                                <el-table-column width="60">
                                    <template #default="scope">
                                        <el-button type="text" @click="removeTodo(scope.row.id)">{{$t("home.del")}}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-scrollbar>
                         </ul>
                     </main>
                     <template #footer>
                         <div id="todo_footer">
                             <aside id="todo_num">
                                {{ $t(todoType) }} --
                                <span size="large" v-if="todoType == 'home.all'">{{ todoList.length }}</span>
                                <span size="large" v-if="todoType == 'home.finish'">{{ getDoneTodoList.length }}</span>
                                <span size="large" v-if="todoType == 'home.uncompleted'">{{ getUnDoneTodoList.length }}</span>
                             </aside>
                             <aside>
                                 <el-button text type="primary" @click="queryTodo(0)">{{ $t("home.all") }}</el-button>
                                 <el-button text type="warning" @click="queryTodo(1)">{{ $t("home.uncompleted") }}</el-button>
                                 <el-button text type="success" @click="queryTodo(2)">{{ $t("home.finish") }}</el-button>
                             </aside>
                         </div>
                     </template>
                 </el-card>
            </el-col>
         </el-row>
      </el-container>

    </div>

    <!-- 系统指导 -->
    <el-tour v-model="open">
    <el-tour-step
      :target="target"
      :title="title"
      :description="description"
      :next-button-props="{ children: $t('home.finish') }"
    />
  </el-tour>
 </template>
 
 <script setup lang="ts">
     import sort from '@/components/sort/index.vue'
     import {ref,onMounted, reactive, getCurrentInstance} from 'vue'
     import * as echarts from 'echarts'
     import { adminStore } from '../../store/admin'
     import { userStore } from '../../store/user'
     let user_store = userStore()
     let store = adminStore()
     let {proxy} = getCurrentInstance()
     let currentName = ref<string>('紫外') // 当前设备的名称
     let currentId = ref<number>(1)
     const deviceList:Array<{id:number,name:string}> = [
         {
             id: 1,
             name: "紫外"
         }, {
             id: 2,
             name: "红外"
         },
         {
             id: 3,
             name: "温度"
         }, {
             id: 4,
             name: "湿度"
         }, {
             id: 5,
             name: "压力"
         }
     ]
      import { moduleStore } from '../../store/module'
      import { storeToRefs } from 'pinia'
      import { tabStore } from '../../store/tab'
      let module_store = moduleStore()
      let {module_num} = storeToRefs(module_store)
      let tob_store = tabStore()
      let { todoList } = storeToRefs(tob_store)
    // 报警的饼图统计
     import {alarmPieOption} from '../../until/chart'
     let pieRef = ref()
     let piePirture = reactive<any>("")
 
     // 报警的柱状图统计
     import {columAlarmOption} from '../../until/chart'
     let colRef = ref()
     let colPirture = reactive<any>("")
     
     // 生命周期
     onMounted(() => {
         // 初始化echart图表对象
         initEcharts()
         // 渲染饼图
         renderEchart()

        window.onresize = () => {
            setTimeout(() => {
            colPirture.resize()
            piePirture.resize()
         },300)
        }


     })
     // 初始化echart对象
     const initEcharts = () => {
         piePirture = echarts.init(pieRef.value) // 初始化饼图
         colPirture = echarts.init(colRef.value) // 初始化柱状图
     }
     // 渲染echart图表
     const renderEchart = () => {
         piePirture.setOption(alarmPieOption()) // 渲染饼图
         colPirture.setOption(columAlarmOption()) // 渲染柱状图
     }
     // todolist
     let todoKeyword = ref("") 
     let todoType = ref("home.all")
     let showTodoList = ref([]) // 显示的todolist
     let {getUnDoneTodoList,getDoneTodoList,getAllTodoList} = storeToRefs(tob_store)
     // 添加记录
     const addTodo = () => {
         if (!todoKeyword.value) return proxy.$message.warning(proxy.$t("home.tipEnter"))
          let len = todoList.value.length + 1
             proxy.$message.success(proxy.$t('home.addSuccess'))
             tob_store.addRecord({
                 id: len,
                 title: todoKeyword.value,
                 done: false
             })
        todoKeyword.value = ""
     }
     // {{$t("home.del")}}记录
     const removeTodo = (index:number) => {
       let i = todoList.value.findIndex(item => item.id === index)
       tob_store.deleteRecord(i)
     }

     // 修改状态
     const changeCheck = (id:number, done: boolean) => {
        tob_store.updateRecord(id,done)
     }
     // 查询记录
     const queryTodo = (status:number) => {
          switch (status) {
               case 0: todoType.value = "home.all";break;
               case 1: todoType.value = "home.uncompleted";break;
               case 2: todoType.value = "home.finish";break;
          }
     }

     /**系统指导 */
     let open = ref(false)
     let target = ref("")  // dom源
     let title = ref("")   // 标题
     let description = ref("") //描述
     interface Itarget {
        id: number,
        name: string,
        target: string,
        title: string,
        description: string
     }
     // 切换target源
     const checkTarget = (targets: Itarget) => {
         target.value = targets.target
         title.value = proxy.$t(targets.title)
         description.value = proxy.$t(targets.description)
         open.value = true
     }
     let tourList:Array<Itarget> = [
        {
            id: 1,
            name: "home.name1",
            target: "#info_warning",
            title: "home.title1",
            description: "home.desc1"
        },
        {
            id: 2,
            name: "home.name2",
            target: "#pieRef",
            title: "home.title2",
            description: "home.desc2"
        },
        {
            id: 3,
            name: "home.name3",
            target: "#error_sort",
            title: "home.title3",
            description: "home.desc3"
        },
        {
            id: 4,
            name: "home.taskList",
            target: "#el_input",
            title: "home.title4",
            description: "home.desc4"
        }
     ]

 </script>
 
 <style lang="less" scoped>
 .center {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .right {
     display: flex!important;
     flex-direction: column;
     h1 {
         font-size: 20px;
         height: 30px;
         line-height: 30px;
     }
     .echart {
         flex: 1;
     }
     .right-pie {
         flex: 1;
         display: flex;
         flex-direction: column;
     }
     .right-status {
         flex: 1;
         display: flex;
         flex-direction: column;
     }
 }
     .AdminHome {
         width: 100%;
         height: 100%;
         background-color: #eff1f4;
         padding: 0px 20px 20px;
         .el-container {
             height: 950px;
             width: 100%;
             display: flex;
             flex-direction: column;
         .el-row {
             width: 100%;
         }
       } 
         header {
             height: 167px;
             display: flex;
             justify-content: space-between;
             padding: 20px 0;
             .module {
                 background: #fff;
                 border-color: rgba(0, 0, 0, .05);
                 width: 24%;
                 box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
                 display: flex;
                 padding: 0 20px;
                 justify-content: space-between;
                 .module_icon {
                     .center;
                     img {
                         width: 80px;
                         height: 80px;
                     }
                 }
                 .module_text {
                     width: 35%;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-content: center;
                     span {
                         font-size: 30px;
                         width: 150px;
                         height: 30px;
                         text-align: center;
                     }
                     .el-text {
                         font-size: 20px;
                     }
                 }
                 .module_icon {
                     width: 30%;
                     .center;
                 }
             }    
         }
     }
 
     /**报警统计 */
     .Alarm_statistics {
             height: 400px;
             margin-bottom: 10px;
             margin-right: 10px;
             margin-left: 10px;
             .echart_statistic {
                 height: 100%;
                 display: flex;
                 .echart_pie {
                     flex: 2;
                     canvas {
                         transform: scale(6)!important;
                     }
                 }
                 .echart_col {
                     flex: 3;
                 }
             }
     }

 
     .chart-grid {
         height: 34vh;
         display: grid;
         grid-template-columns: repeat(2,1fr);
         grid-template-rows: repeat(2,1fr);
         .host-item {
           display: flex;
           align-items: center;
           justify-content: center;
           flex-direction: column;
           .img-icon {
             width: 50px;
             height: 50px;
             border-radius: 50%;
             background-color: #3587f0;
             display: flex;
             align-items: center;
             justify-content: center;
           }
           .host_name {
             padding-top: 10px;
             color: #000;
             font-weight: 400;
             font-size: 18px;
             width: 100%;
             text-align: center;
           }
           .host_num {
             color: #5f6dd5;
             font-size: 20px;
             padding-top: 5px;
             font-weight: bold;
             width: 100%;
             text-align: center;
           }
         }
       }
       .card-header {
          font-size: 20px;
       }
     /**代办列表 */
     .todo {
        height: 99%;
         list-style-type: none;
         :deep(.el-card__header) {
             padding: 0!important;
             height: 60px!important;
             .card-header {
                 height: 100%;
             }
         }
     }
     .todoList {
         height: 28vh;
     }
 
    :deep(#el_input) {
         &::-webkit-input-placeholder {
             color: #000 !important;
             font-size: 20px;
             padding-left: 10px;
             outline: none; 
         }
         &::-moz-placeholder {
             color: #000 !important;
             font-size: 20px;
             padding-left: 10px;
             outline: none; 
         }
     }
   /** todoList 的底部 */
   :deep(.el-card__footer) {
     padding: 0!important;
   }
   #todo_footer {
     height: 60px;
     display: flex;
     align-items: center;
     #todo_num {
        display: flex;
        align-items: center;
     }
     aside {
         height: 100%;
         display: flex;
         align-items: center;
         &:first-child {
             width: 30%;
             padding-left: 10px;
             
         }
         &:last-child {
             padding-right: 10px;
             width: 70%;
             justify-content: flex-end;
         }
     }
   }
 </style>